<template>
  <view class="home">
    <u-swiper :list="activityInfo.images" height="462rpx"></u-swiper>
    <!-- <image :src="prefixURL(activityInfo.images)" class="banner-image" mode=""></image> -->
    <view class="activity-box">
      <view class="activity-name">{{activityInfo.title}}</view>
      <view class="activity-text">活动时间：{{activityInfo.start_time_text}}-{{activityInfo.end_time_text}}</view>
      <view class="activity-text">参与人数：{{activityInfo.signup_num}}人</view>
      <view class="activity-text">活动地点：{{activityInfo.address}}</view>
      <view class="u-flex-y-center u-flex-between u-m-t-20">
        <image src="@/static/images/04_17ng.png" class="activity-img" mode=""></image>
        <view class="u-flex-y-center">
          <view class="u-flex-y-center">
            <image src="@/static/images/01_9ji.png" class="activity-eye" mode=""></image>
            <text class="activity-num">{{activityInfo.views}}</text>
          </view>
          <view class="u-flex-y-center u-m-l-32">
            <image src="@/static/images/01_9kk.png" class="activity-icon" mode=""></image>
            <text class="activity-num">{{activityInfo.shares}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="activity-detail">
      <view class="activity-title">活动详情</view>
      <u-parse :content="activityInfo.content"></u-parse>
    </view>
    <view class="action-box u-flex-y-center">
      <button class="action-btn u-flex-1" open-type="share">分享</button>
      <view class="action-btn  u-flex-fill" @click="$u.route(`/pages/index/activityEnroll?id=${id}`)">我要报名</view>
    </view>
    <back-page />
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { activityDetail, activityShare } from '../../config/api';
  import { getCache, prefixURL, setCache } from '../../util/util';
  import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
  const props = defineProps({
    id: {
      type: [String, Number],
      default: ''
    },
    user_id: {
      type: [String, Number],
      default: ''
    }
  })
  onShareTimeline(() => {
    activityShare({ id: props.id })
    let userInfo = getCache('userInfo')
    return {
      path: `pages/index/articleDetail?id=${props.id}&user_id=${userInfo.user_id}`
    }
  })
  onShareAppMessage((e) => {
    activityShare({ id: props.id })
    let userInfo = getCache('userInfo')
    return {
      path: `pages/index/articleDetail?id=${props.id}&user_id=${userInfo.user_id}`
    }
  })
  const activityInfo = ref({})
	
	if(props.user_id){
		setCache('invite',props.user_id)
	}
	
  onMounted(() => {
    _activityDetail()
  })
  // 详情
  const _activityDetail = () => {
    activityDetail({ id: props.id, user_id: props.user_id }).then(res => {
      console.log(res)
      activityInfo.value = res.data
      activityInfo.value.images = activityInfo.value.images.split(',').map(item => prefixURL(item))
    })
  }
</script>

<style lang="scss" scoped>
  .home {
    background: #F7F6FA;
    min-height: 100vh;
    padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  }

  .banner-image {
    height: 462rpx;
    width: 100%;
  }

  .activity-box {
    background: #fff;
    padding: 20rpx;
    border-radius: 24rpx;
    margin: 20rpx;
    margin-top: -40rpx;
    position: relative;
    z-index: 1;

    .activity-name {
      font-size: 30rpx;
      font-weight: 800;
      color: #000;
    }

    .activity-text {
      margin-top: 16rpx;
      font-size: 26rpx;
      color: #666;
      font-weight: 500;
    }

    .activity-img {
      width: 322rpx;
      height: 72rpx;
    }

    .activity-eye {
      width: 36rpx;
      height: 28rpx;
      margin-right: 16rpx;
    }

    .activity-icon {
      width: 28rpx;
      height: 28rpx;
      margin-right: 16rpx;
    }

    .activity-num {
      font-size: 26rpx;
      color: #333;
    }
  }

  .activity-detail {
    padding: 24rpx;
    background-color: #fff;
    border-radius: 24rpx;
    margin: 20rpx;

    .activity-title {
      font-size: 28rpx;
      font-weight: 800;
      color: #000;
    }

    image {
      width: 100%;
      height: auto;
    }
  }

  .action-box {
    position: fixed;
    background: #fff;
    bottom: 0;
    padding: 18rpx 24rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 18rpx);
    left: 0;
    right: 0;
    z-index: 9;

    .action-btn {
      height: 82rpx;
      border-radius: 48rpx;
      border: 1rpx solid #F87610;
      color: #F87610;
      font-size: 30rpx;
      text-align: center;
      line-height: 82rpx;
      background: #fff;
    }

    .action-btn+.action-btn {
      background: #F87610;
      color: #fff;
      margin-left: 22rpx;
    }
  }
</style>